<div id="wrap">
  <img class="img" data-src-600px="https://q4.itc.cn/images01/20241118/7188e598f2e94531b8b87f65a1d77b1a.jpeg"
            data-src-1000px="https://q4.itc.cn/images01/20241118/7188e598f2e94531b8b87f65a1d77b1a.jpeg">
</div>

<style>
  :root {
    --root-image-src: url("https://q4.itc.cn/images01/20241118/7188e598f2e94531b8b87f65a1d77b1a.jpeg");
  }

  :root .toggle-wrap {
    --root-image-src: url("https://ts1.cn.mm.bing.net/th/id/R-C.b5d5d9ab2ed0cabdcbb773f0cb198d48?rik=G5%2b8uLpKt06muQ&riu=http%3a%2f%2fn.sinaimg.cn%2fsinakd20230325ac%2f116%2fw1482h2634%2f20230325%2f9390-d5969a905325ea90032095aa0b26ff4f.jpg&ehk=3lRuycUGdcjGmKV3u0MGUVJtIYcUKj4mpiPF%2fbyQfzM%3d&risl=&pid=ImgRaw&r=0");
  }


  img {
    width: 300px;
  }

  @media (min-device-width:600px) {
    img {
      /* content: attr(data-src-600px, url); */
      content: url("https://ts1.cn.mm.bing.net/th/id/R-C.b5d5d9ab2ed0cabdcbb773f0cb198d48?rik=G5%2b8uLpKt06muQ&riu=http%3a%2f%2fn.sinaimg.cn%2fsinakd20230325ac%2f116%2fw1482h2634%2f20230325%2f9390-d5969a905325ea90032095aa0b26ff4f.jpg&ehk=3lRuycUGdcjGmKV3u0MGUVJtIYcUKj4mpiPF%2fbyQfzM%3d&risl=&pid=ImgRaw&r=0");
    }
  }

  @media (min-device-width:1000px) {
    img {
      /* url 是静态的，var是动态的，不能直接把var放进url中 */
      /* content: url(var(--root-image-src)); */

      /* content: attr(data-src-1000px,url); */
      /* content: var(--root-image-src); */
      content: url("https://q4.itc.cn/images01/20241118/7188e598f2e94531b8b87f65a1d77b1a.jpeg");
    }
  }
</style>

<script>
  // 模拟点击事件来改变图片源  
  document.querySelector('#wrap').addEventListener('click', function () {
    console.log(`打印输出`)
    // document.documentElement.style.setProperty('--root-image-src', 'url("https://tse4-mm.cn.bing.net/th/id/OIP-C.hRmovQ-FtkVA1yTVIrWDMgHaEK?rs=1&pid=ImgDetMain")');
    // document.body.style.setProperty('--root-image-src','url("https://q4.itc.cn/images01/20241118/7188e598f2e94531b8b87f65a1d77b1a.jpeg")');
    // this.style.setProperty('--root-image-src', 'url("https://q4.itc.cn/images01/20241118/7188e598f2e94531b8b87f65a1d77b1a.jpeg")');
    this.classList.toggle('toggle-wrap');
  });</script>